<template>
  <div>
    <div class="c-header-border">
      <el-row :gutter="8">
        <el-col :span="12">
          <div class="c-header-bg">
            <div class="c-header-title">保函类型</div>
            <div id="main" class="pie-wrap" style="height: 455px"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="c-header-bg">
            <div class="c-header-title">保函余额</div>
          </div>
          <div class="c-header-between"></div>
          <div class="c-header-bg">
            <div class="c-header-title">保函融资利率</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    init() {
      var chartDom = document.getElementById("main");
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        legend: {
          top: "bottom",
          orient: "vertical",
          itemGap: 10,
          itemWidth: 10,
          itemHeight: 10,
          icon: "circle",
          itemStype: {
            color: {
              type: "radiul",
            },
          },
          textStyle: {
            fontSize: 12,
            color: "#ffffff",
          },
          // padding: [0, 1, 1, 1],
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [0, 150],
            center: ["50%", "35%"],
            roseType: "single",
            itemStyle: {
              borderRadius: 0,
            },
            label: {
              show: false,
              position: "center",
            },
            // itemStyle: {
            //   emphasis: {
            //     //选中效果
            //     shadowBlur: 10,
            //     shadowOffsetX: 0,
            //     shadowColor: "rgba(0, 0, 0, 0.5)",
            //   },
            // },
            data: [
              { value: 40, name: "保函 1" },
              { value: 38, name: "保函 2" },
              { value: 32, name: "保函 3" },
              { value: 30, name: "保函 4" },
              { value: 28, name: "保函 5" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.init();
  },
};
</script>